<script setup>
import { useRoute } from 'vue-router'
import { logistics } from '@/api/modules/logistics.js'
import { ref, onMounted } from 'vue'

const route = useRoute()

console.log(route)
const packageId = ref(route.query.packageId)
const commonList = ref([
  {
    img: './src/assets/img/packageQuery/commonLogistics1.jpg',
    title: '中国EMS',
    url: 'https://www.ems.com.cn/'
  },
  {
    img: './src/assets/img/packageQuery/commonLogistics2.jpg',
    title: '美國USPS',
    url: 'https://www.usps.com/'
  },
  {
    img: './src/assets/img/packageQuery/commonLogistics3.jpg',
    title: '澳洲郵政',
    url: 'https://auspost.com.au/'
  },
  {
    img: './src/assets/img/packageQuery/commonLogistics4.jpg',
    title: '加拿大郵政',
    url: 'https://www.canadapost-postescanada.ca/cpc/en/home.page#'
  },
  {
    img: './src/assets/img/packageQuery/commonLogistics5.jpg',
    title: '英国皇家郵政',
    url: 'https://www.royalmail.com/'
  },
  {
    img: './src/assets/img/packageQuery/commonLogistics6.jpg',
    title: '马来西亚郵政',
    url: 'https://www.pos.com.my/'
  },
  {
    img: './src/assets/img/packageQuery/commonLogistics7.jpg',
    title: '新西蘭郵政',
    url: 'https://www.nzpost.co.nz/'
  },
  {
    img: './src/assets/img/packageQuery/commonLogistics8.jpg',
    title: '新加坡郵政',
    url: 'https://www.singpost.com/'
  },
  {
    img: './src/assets/img/packageQuery/commonLogistics9.jpg',
    title: '法國郵政',
    url: 'https://www.laposte.fr/particulier'
  },
  {
    img: './src/assets/img/packageQuery/commonLogistics10.jpg',
    title: 'DHL',
    url: 'https://www.dhl.com/cn-en/home.html'
  }
])
// 物流查询
// 监听是否进页面就有参数，是的话帮忙发请求
 const firstFlag = ref(false)
  onMounted( ()=>{
  if(packageId.value )
  logisticsFn() 
 })
  
const logisticsData = ref({})
const logisticsFn = () => {
  if(!packageId.value) {
    return  ElMessage({
      type: 'error',
      message: '请先输入集运单号',
      center: true,
 
    }) 
  }
  if(!(/^[A-Za-z0-9]+$/.test(packageId.value))) return   ElMessage({
      type: 'error',
      message: '集运单号由数字和字母组成，请勿输入请他内容',
      center: true,
 
    }) 
  if(!firstFlag.value) firstFlag.value = true
  logistics({ isOfficialWebsite: true, transferOrderNumber: packageId.value }).then((res) => {
    logisticsData.value = res.data[0]
    ElMessage.success(res.data[0] ? '查询成功' : '暂无物流信息')
  })
}
</script>

<template>

  <div
    class="h-[250px] bg-[url(@/assets/img/packageQuery/trackBg.jpg)] bg-cover bg-no-repeat bg-[#f8f8f9] relative"
  >
    <div class="absolute top-[230px] left-1/2 -translate-x-1/2">
      <div class="bg-white shadow-xl py-[60px] px-[120px] lg:w-[1024px]">
        <div class="flex border border-[#E70012]">
          <input
            type="text"
            v-model="packageId"
            @keyup.enter="logisticsFn"
            placeholder="請輸入集运单号"
            class="w-[140px] h-[60px] px-[20px] lg:flex-1 !border-none mr-2 focus:outline-0"
          />
          <div
            class="w-[90px] lg:w-[140px] h-[60px] bg-[#E70012] text-center leading-[60px] text-white cursor-pointer"
            @click="logisticsFn"
          >
            查询
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-[200px] flex justify-center pb-[30px] px-[15px]">
    <div
   v-if="firstFlag"   class="w-full lg:w-[1024px] bg-[#fbfbfb] border border-[#dfdfdf] px-[20px] py-[10px] text-center"
    >
      <el-timeline style="max-width: 600px" v-if="logisticsData && logisticsData.transitOrderNo">
        <el-timeline-item
          placement="top"
          type="primary"
          color="#9bcaef"
          size="large"
          :timestamp="logisticsData.createTime"
        >
          <el-card>
            <h4>{{ logisticsData.orderCreateDescribe }}</h4>
            <p>{{ logisticsData.createTime }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          placement="top"
          type="primary"
          color="#9bcaef"
          size="large"
          :timestamp="logisticsData.recheckTime"
        >
          <el-card>
            <h4>{{ logisticsData.remarks }}</h4>
            <p>{{ logisticsData.recheckTime }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          placement="top"
          type="primary"
          color="#9bcaef"
          size="large"
          :timestamp="logisticsData.pickingTime"
        >
          <el-card>
            <h4>{{ logisticsData.pickRemarks }}</h4>
            <p>{{ logisticsData.pickingTime }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          placement="top"
          type="primary"
          color="#9bcaef"
          size="large"
          :timestamp="logisticsData.pickingTime"
        >
          <el-card>
            <h4>{{ logisticsData.pickRemarks }}</h4>
            <p>{{ logisticsData.pickingTime }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <h4 v-else class="text-[#e70012] border-b border-dashed border-[#ddd] py-[10px] text-lg">
        抱歉暫無查詢記錄
      </h4>
    </div>
  </div>
  <div class="flex justify-center bg-[#f6f4f7] px-[15px]">
    <div class="w-[1024px]">
      <div class="h-[80px] text-lg leading-[80px]">常用物流網站</div>
      <div class="grid grid-cols-3 lg:grid-cols-5 gap-3 lg:gap-10 mb-[50px]">
        <a
          v-for="(item, index) in commonList"
          :key="index"
          :href="item.url"
          target="_blank"
          class="flex flex-col bg-white border border-[#d8d8d8] cursor-pointer hover:border-[#1268BB] common"
        >
          <img :src="item.img" alt="" class="w-full" />
          <p class="h-[40px] leading-[40px] text-center">{{ item.title }}</p>
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped>
.common:hover p {
  background: #1268bb;
  color: white;
}
</style>
